<template>
    <div class="newBusiness">
         <div class="newBusiness_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">编辑账号<i class="el-icon-close"></i></div>
		</div>
        <h5>编辑账号</h5>
        <div class="newBusiness_info">
            <div class="newBusiness_info_box">
                <h4>账号信息</h4>
                <form action="#" class="form">
                    <div class="form_left">
                        <ul>
                            <li><span>账号</span><input v-model="form.mobile" type="text"></li>
                            <li><span>类型</span><input readonly v-model="form.type" type="text"></li>
                            <li><span>到期时间</span>
                                <!-- <input type="text"> -->
                                <div class="block">
                                    <el-date-picker
                                    :disabled="endTimePick"
                                    v-model="form.endTime"
                                    placeholder="选择日期时间">
                                    </el-date-picker>
                                </div>
                            <i style="cursor: pointer;" @click="toPickTime">选择</i></li>
                        </ul> 
                    </div>
                    <div class="form_right">
                         <ul>
                            <li><span>密码</span><input type="text" v-model="form.ori_password" :disabled="editPassW"><i @click="toEditPassW" style="cursor: pointer;">修改</i></li>
                            <li>
                                <span>状态</span>
                                <el-radio-group v-model="form.status" @change="toEditStatus">
                                    <el-radio :label="1">正常</el-radio>
                                    <el-radio :label="0">禁用</el-radio>
                                </el-radio-group>
                            </li>
                        </ul> 
                    </div>
                </form>
            </div>
        </div>
        <div class="newBusiness_ralation">
            <div class="newBusiness_ralation_box">
                <h4>账号关联</h4>
                 <form action="#" class="form">
                    <div class="form_left">
                        <ul>
                            <li><span>负责人</span><input type="text" v-model="form.realname"></li>
                            <li><span>店铺名称</span><input type="text" maxlength="12" v-model="rala.title"></li>
                        </ul> 
                    </div>
                    <div class="form_right">
                         <ul>
                            <li><span>手机号码</span><input type="number" v-model="rala.mobile" @blur="inputMobile"></li>
                            
                        </ul> 
                    </div>
                </form>
            </div>
        </div>
        <div class="submitBtn">
            <button @click="toEdit">提交</button>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: null,
      account_id: null, //编辑跳转过来的id
      status: 1,
      editPassW: true, //修改密码
      endTimePick: true, //
      form: {
        //账号信息
        mobile: "", //账号
        type: "", //类型
        endTime: "", //到期时间
        ori_password: "", //密码
        status: "", //状态
        realname: "", //负责人真实姓名
      },

      rala: {
        //关联信息
        title: "", //店铺名称
        mobile: "" //店铺电话
      },

      editInfo:{  //修改提交时用来比较那一项修改过了
        ori_password:'',
        realname:'',
        mobile:'',
        title:''
      }
    };
  },
  mounted() {
    let account_id = this.$route.query.id;
    this.account_id = account_id;
    let user_id = localStorage.getItem("user_id");
    this.user_id = Number(user_id);
    this.getShopStore();
    
  },
  methods: {
    //获取列表编辑进来的商家详情
    getShopStore() {
      this.$http
        .post("/api/root/Account/info", {
          user_id: this.user_id,
          account_id: this.account_id
        })
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            let data = res.data;
            this.form = data.base ? data.base : [];
            this.rala = data.info ? data.info : [];
            this.editInfo.ori_password = data.base.ori_password;
            this.editInfo.realname = data.base.realname;
            this.editInfo.mobile = data.info.mobile;
            this.editInfo.title = data.info.title;
            this.form.type =
              data.base.type == "designer_per"
                ? "设计师"
                : data.base.type == "designer"
                  ? "装饰公司"
                  : data.base.type == "builder"
                    ? "施工队"
                    : data.base.type == "shop" ? "商家" : data.base.type == 'decoration'?'装修公司':'';
          }
        });
    },

    // 手机号
    inputMobile(){
      let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if(!reg.test(this.rala.mobile)){
        this.$message.warning('手机号码格式错误！')
        return
      }
    },

    // 提交按钮
    toEdit(){
        let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
        if(!reg.test(this.rala.mobile)){
          this.$message.warning('手机号码格式错误！')
          return
        }
        let ori_password = this.form.ori_password==this.editInfo.ori_password?null:this.form.ori_password;
        let realname = this.form.realname==this.editInfo.realname?null:this.form.realname;
        let mobile = this.rala.mobile==this.editInfo.mobile?null:this.rala.mobile;
        let title = this.rala.title==this.editInfo.title?null:this.rala.title;
        this.$http.post('/api/root/Account/edit',{ori_password,user_id:this.user_id,account_id:this.account_id,realname,mobile,title}).then(res=>{
            if(res.code){
                this.$router.back(1);
                this.$message({
                    type:'success',
                    message:'修改成功'
                })
            }else{
              this.$message.warning(res.msg)
            }
        })
    },

    //状态修改
    toEditStatus(){
      this.$http.post('/api/root/Approval/accountStatus',{user_id:this.user_id,account_id:this.account_id,status:this.form.status}).then(res=>{
        if(res.code==1){
          this.$message({
            type:'success',
            message:'状态修改成功'
          })
        }else{
           this.$message({
            type:'erroe',
            message:res.msg
          })
        }
      })
    },

    //修改密码
    toEditPassW() {
      if (this.editPassW) {
        this.editPassW = false;
      } else {
        this.editPassW = true;
      }
    },

    //选择到期时间  (暂无)
    toPickTime() {
      // if (this.endTimePick) {
      //   this.endTimePick = false;
      // } else {
      //   this.endTimePick = true;
      // }
    }
  }
};
</script>

<style lang="less" scoped>
@import "editBusiness.less";
</style>

